<template>
  <div style="height: 100%; overflow: auto;">

    <!-- 角色列表 -->
    <el-card class="role-card">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="changeTab">
        <!-- 系统角色 -->
        <el-tab-pane label="系统角色" name="first">
          <div class="role-list" id="system-role-list">
            <div v-for="(roleItem, roleIndex) in systemRoleList" :key="roleIndex" @click="changeRole('system', roleItem, roleIndex)">
              <div class="role-item" v-if="currentRole.id != roleItem.id">
                <div class="role-top">
                  <img src="../../assets/images/role_icon.png" alt="">
                  <span class="role-name curP otw-common">{{ roleItem.name }}</span>
                </div>
              </div>
              <div class="role-item role-active" v-else>
                <div class="role-active-item">
                  <div class="role-img role-icon">
                    <img src="../../assets/images/role_icon_active.png" alt="">
                  </div>
                  <span class="role-name curP otw-common">{{ roleItem.name }}</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 右侧工具区 -->
          <div class="role-toobar">
            <span class="curP" @click="showAllSystemRole" v-if="!isSystemRoleShowAll && systemRoleList.length != 0 && isShowSystem">展开全部
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
            <span class="curP" @click="showAllSystemRole" v-if="isSystemRoleShowAll && systemRoleList.length != 0 && isShowSystem">收起
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
          </div>
        </el-tab-pane>


        <!-- 自定义角色 -->
        <el-tab-pane label="自定义角色" name="second">
          <div class="role-list" id="custom-role-list">
            <div v-for="(roleItem, roleIndex) in customRoleList" :key="roleIndex" @click="changeRole('custom',roleItem, roleIndex)">
              <div class="role-item" v-if="currentRole.id != roleItem.id">
                <div class="role-top">
                  <img src="../../assets/images/role_icon.png" alt="">
                  <span class="role-name curP otw-common">{{ roleItem.name }}</span>
                </div>
              </div>
              <div class="role-item role-active" v-else>
                <div class="role-active-item">
                  <div class="role-img role-icon">
                    <img src="../../assets/images/role_icon_active.png" alt="">
                  </div>
                  <span class="role-name curP otw-common">{{ roleItem.name }}</span>
                  <div class="role-img role-delete curP">
                    <el-icon @click="editRole('custom', roleItem)">
                      <EditPen />
                    </el-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右侧工具区 -->
          <div class="role-toobar">
            <span class="curP" @click="showAllCustomRole" v-if="!isCustomRoleShowAll && customRoleList.length != 0 && isShowCustom">展开全部
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
            <span class="curP" @click="showAllCustomRole" v-if="isCustomRoleShowAll && customRoleList.length != 0 && isShowCustom">收起
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
            <div class="role-add curP" @click="addRole">
              <img src="../../assets/images/add_role.png" alt="" style="width: 22px;">
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <div class="role-bottom" id="role-bottom-depart">
      <!-- 角色权限 -->
      <el-card class="role-permission box-card">
        <template #header>
          <div class="card-header">
            <span class="otw-common" :title="currentRole.name">角色权限（{{ currentRole.name }}）</span>
          </div>
        </template>

        <div class="tree">
          <div class="permission-content">
            <p class="permission-title">应用权限</p>
            <el-checkbox-group v-model="checkApp" style="margin-left: 10px;">
              <el-checkbox v-for="(item, index) in appList" :key="index" :label="item.appId" :checked="item.selected == 1"> {{ item.appName }} </el-checkbox>
            </el-checkbox-group>
          </div>

          <div class="permission-content">
            <p class="permission-title" style="margin-top: 10px;">菜单权限</p>
            <el-collapse v-model="activeNameTree">
              <div v-for="(item, index) in permissionTree" :key="index">
                <el-collapse-item :name="index" v-if="checkApp.includes(index)">
                  <template #title>
                    <span class="collapse-title">{{item.actionName}}</span>
                  </template>
                  <el-tree
                    v-loading="treeLoading"
                    ref="permissionTreeRef"
                    :data="item.children"
                    show-checkbox
                    node-key="id"
                    default-expand-all
                    :props="defaultProps"
                    :disabled="isShowTooltip"
                    :default-checked-keys="item.defaultCheckedKeys"
                  >
                    <template #default="{ node }">
                        <el-tooltip class="item" effect="dark" placement="top" :content="node.label" :disabled="isShowTooltip">
                          <span ref="nodeLabelRef" @mouseover="mouseOver($event)">{{ node.label + `${(node.type == '1' ? '路由' : node.type == '2' ? '按钮' : node.type == '0' ? '菜单' : '')}` }}</span>
                        </el-tooltip>
                    </template>
                  </el-tree>
                </el-collapse-item>
              </div>
            </el-collapse>
          </div>
        </div>

        <div class="tree-buttom-button">
          <el-button type="primary" @click="savePermission" :loading="rolePermissionLoading">保存</el-button>
        </div>
      </el-card>

      <!-- 用户列表 -->
      <el-card class="role-user box-card">
        <template #header>
          <div class="card-header">
            <span>用户列表（{{ currentRole.name }}）</span>
            <div style="display: flex;">
              <el-button round type="primary" @click="addMember" style="margin-right: 10px;">
                <template #icon>
                  <img src="../../assets/images/add_member.png" alt="">
                </template>
              </el-button>
              <el-form @submit.native.prevent="() => getOrgUsers">
                <el-form-item>
                  <el-input placeholder="请输入用户姓名" v-model="keyWord" @keyup.enter="getOrgUsers">
                    <template #suffix>
                      <el-icon class="el-input__icon curP"  @click="getOrgUsers"><Search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </template>

        <div class="table-data" v-loading="loading" id="table-data">
          <el-table
            :data="userData"
            stripe
            borderresizable
            highlight-hover-row
            show-overflow
            keep-source
            scrollbar-always-on
          >
            <el-table-column
              v-for="(tableItem, tableIndex) in userTableColumns" :key="tableIndex"
              :prop="tableItem.field"
              :label="tableItem.label"
              :min-width="tableItem.minWidth"
              :formatter="tableItem.formatter"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              fixed="right"
              field="opera"
              label="操作"
              min-width="120"
            >
              <template #default="{ row }">
                <el-button
                  link
                  @click="userDetail(row)"
                  style="color: #5897DB;"
                >查看</el-button>
                <el-button
                  link
                  @click="userDelete(row)"
                  style="color: #5897DB;"
                >移除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- <div class="table-page">
            <el-pagination background layout="prev, pager, next" :total="dataTotal" :page-size="pageSize" :current-page="currentPage" @current-change="currentChange" />
          </div> -->
        </div>
      </el-card>
    </div>

    <!-- 新增、编辑角色弹窗 -->
    <el-dialog :title="changeRoleType == 'add' ? '新增角色' : '编辑角色'" v-model="dialogRoleVisible" @close="cancelRole" draggable>
      <el-form
        ref="roleFormRef"
        :model="roleForm"
        label-width="100px"
        class="demo-ruleForm"
        status-icon
        :rules="roleRules"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleForm.name" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="des">
          <el-input v-model="roleForm.des" placeholder="请输入角色描述"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-button">
        <el-button @click="cancelRole" :loading="roleButtonLoading">取消</el-button>
        <el-button type="primary" @click="submitRole" :loading="roleButtonLoading">{{ changeRoleType == 'add' ? '新增' : '编辑' }}</el-button>
      </div>
    </el-dialog>

    <!-- 添加成员弹窗 -->
    <el-dialog title="新增成员" v-model="dialogMemberVisible" @close="cancelMember" draggable>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        status-icon
        :rules="rules"
      >
        <el-form-item label="选择用户" prop="userIds">
          <el-select
            v-model="ruleForm.userIds"
            placeholder="请选择用户"
            clearable
            multiple
            filterable
            style="width: 100%;"
          >
            <el-option v-for="(item, index) in userList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="dialog-button">
        <el-button @click="cancelMember" :loading="memberButtonLoading">取消</el-button>
        <el-button type="primary" @click="submitMember" :loading="memberButtonLoading">新增</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup name="application">
import { useRouter } from 'vue-router';
import { computed, ref, onMounted, reactive, nextTick, watch } from 'vue';
import { Delete, Search, CaretBottom, CaretTop, EditPen } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { http } from '@/utils/http/index';
import { arrayToTree, findLevel } from "@/utils/index.js"
import { format } from '@/plugins/moment.js'
import { useAuthStore } from '@/stores/modules/auth.js';

/* 路由 */
const router = useRouter()

const authStore = useAuthStore()

/* 所有按钮权限 */
const btnPermissionList = ref([])
btnPermissionList.value = authStore.base_auth_tree.find(item => item.controlName == 'btn_permission')?.children

/* 查询是否有权限 */
const getBtnPermission = (name) => {
  let flag = false
  if( btnPermissionList.value.find(item => item.controlName == name && item.selected == 1) ) {
    flag = true
  }
  return flag
}

onMounted(() => {
  getRoleList()

  window.onresize = () => {
    getRoleListHeight()
  }
})

const activeName = ref("first")

/* 系统角色列表 */
const systemRoleList = ref([])

/* 自定义角色列表 */
const customRoleList = ref([])

/* 角色列表 */
const rolePageNum = ref(1)
const rolePageSize = ref(100)
const roleList = ref([])

/* 当前所选角色 */
const currentRole = ref({})

/* 获取角色列表 */
const getRoleList = () => {
  let params = {
    pagenum: rolePageNum.value,
    pagesize: rolePageSize.value
  }
  http.$GET("/RoleManager/GetRole", params).then(res => {
    if(res.isError) return ElMessage.warning("查询失败")
    if(!res.result.content.length) return

    /* 所有角色 */
    roleList.value = roleList.value.concat(res.result.content)
    if(rolePageNum.value < res.result.total_num) {
      rolePageNum.value = rolePageNum.value + 1
      getRoleList()
    } else {
      /* 系统角色和自定义角色 */
      let system = []
      let custom = []
      roleList.value.map((item) => {
        if(item.isSystem) {
          system.push(item)
        } else {
          custom.push(item)
        }
      })
      systemRoleList.value = system
      customRoleList.value = custom
      getRoleListHeight()

      /* 默认选中第一个角色 */
      currentRole.value = systemRoleList.value[0] ? systemRoleList.value[0] : customRoleList.value[0] ? customRoleList.value[0] : {}
      if(!currentRole) return

      /* 获取当前角色下权限信息 */
      getRolePermission()
      /* 获取当前角色下用户信息 */
      getOrgUsers()
    }
  })
}

/* 点击切换角色 */
const changeRole = (type, item, index) => {
  currentRole.value = item
  getRoleListHeight()

  getRolePermission()
  getOrgUsers()
  keyWord.value = ""
}

/* 切换tab */
const changeTab = () => {
  getRoleListHeight()
}

/* 是否显示展开全部系统角色按钮 */
const isShowSystem = ref(false)

/* 是否显示展开全部自定义角色按钮 */
const isShowCustom = ref(false)

/* 获取角色列表元素高度 */
const getRoleListHeight = () => {
  /* 判断角色列表高度是否显示展开按钮 */
  setTimeout(() => {
    if(document.getElementById("system-role-list") && document.getElementById("system-role-list").scrollHeight > 67) {
      isShowSystem.value = true
    } else {
      isShowSystem.value = false
    }
    if(document.getElementById("custom-role-list") && document.getElementById("custom-role-list").scrollHeight > 67) {
      isShowCustom.value = true
    }else {
      isShowCustom.value = false
    }
  })
}

/* 系统角色是否展开全部 */
const isSystemRoleShowAll = ref(false)

/* 点击展开全部或折叠系统角色 */
const showAllSystemRole = () => {
  if(isSystemRoleShowAll.value) {
    isSystemRoleShowAll.value = false
    document.getElementById("system-role-list").style.overflow = 'hidden'
    document.getElementById("system-role-list").style.height = '57px'
  }else {
    isSystemRoleShowAll.value = true
    document.getElementById("system-role-list").style.overflow = 'visible'
    document.getElementById("system-role-list").style.height = 'auto'
  }
}

/* 自定义角色是否展开全部 */
const isCustomRoleShowAll = ref(false)

/* 点击展开全部或者折叠自定义角色 */
const showAllCustomRole = () => {
  if(isCustomRoleShowAll.value) {
    isCustomRoleShowAll.value = false
    document.getElementById("custom-role-list").style.overflow = 'hidden'
    document.getElementById("custom-role-list").style.height = '57px'
  }else {
    isCustomRoleShowAll.value = true
    document.getElementById("custom-role-list").style.overflow = 'visible'
    document.getElementById("custom-role-list").style.height = 'auto'
  }
}

/* 新增、编辑角色部分 */
const changeRoleType = ref("")
const dialogRoleVisible = ref(false)
const roleFormRef = ref(null)
const roleForm = ref({
  name: "",
  des: "",
})

const checkName = (rule, value, callback) => {
  if (roleForm.value.name == '系统管理员') {
    callback(new Error('角色名称不能为“系统管理员”，请重新命名'))
  } else {
    callback()
  }
}
const roleRules = reactive({
  name: [
    { required: true, message: '请填写角色名称', trigger: 'blur' },
    { validator: checkName }
  ],
  des: [
    { required: true, message: '请输入角色描述', trigger: 'blur' }
  ],
})

/* 新增、编辑提交按钮禁用 */
const roleButtonLoading = ref(false)

/* 点击新增角色 */
const addRole = (type) => {
  changeRoleType.value = 'add'
  dialogRoleVisible.value = true
}

/* 点击编辑角色信息 */
const editRole = (type, item) => {
  changeRoleType.value = 'edit'
  dialogRoleVisible.value = true
  /* 赋值 */
  roleForm.value.name = item.name
  roleForm.value.des = item.description
  roleForm.value.id = item.id
}

/* 新增角色提交 */
const submitRole = () => {
  roleFormRef.value.validate((valid, fields) => {
    if(valid) {
      roleButtonLoading.value = true
      let params = JSON.parse(JSON.stringify(roleForm.value))

      const formData = new FormData()
      for(let k in params) {
        formData.append(k ,params[k])
      }

      http.$POST("/RoleManager/AddOrUpdateRoleDo", formData).then(res => {
        roleButtonLoading.value = false
        if(res.isError) return ElMessage.warning(res.message)
        ElMessage.success("操作成功")
        cancelRole()
        roleList.value = []
        rolePageNum.value = 1
        getRoleList()
      }).catch(() => {
        roleButtonLoading.value = false
        cancelRole()
        ElMessage.warning("操作失败")
      })
    }else {
      ElMessage.warning("请先填写必填项")
    }
  })
}

/* 新增角色取消 */
const cancelRole = () => {
  roleForm.value.id = ""
  roleForm.value.name = ""
  roleForm.value.des = ""
  dialogRoleVisible.value = false
}

/* 应用列表 */
const appList = ref([])
/* 所选应用 */
const checkApp = ref([])

/* 默认展开的菜单权限 */
const activeNameTree = ref()

/* 权限树 */
const permissionTree = ref([])
const permissionTreeRef = ref([])

/* 权限树配置 */
const defaultProps = ref({
  children: 'children',
  label: 'actionName',
})

/* 树加载状态 */
const treeLoading = ref(false)

/* 处理树列表，获取当前已有权限 */
const findTreeArr = (arr, newArr) => {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].selected == 1) {
      newArr.push(arr[i].id);
    }
    if (arr[i].children) {
      findTreeArr(arr[i].children, newArr);
    }
  }
  return newArr;
}

//回显处理
const resultChecked = (id, data, newArr) => {
  data.forEach(item => {
    if(item.id == id){
      if( item.children.length == 0 ){
        newArr.push(item.id)
      }
    }else{
      if( item.children.length != 0 ){
        resultChecked(id, item.children, newArr)
      }
    }
  })
}

/* 获取权限树 */
const getRolePermission = () => {
  treeLoading.value = true
  loading.value = true
  permissionTree.value = []

  http.$GET("/RoleAction/GetActionsTreeByRoleId", { roleId: currentRole.value.id }).then(res => {
    treeLoading.value = false
    loading.value = false

    if(res.isError) return ElMessage.warning(res.message)
    if( !res.result.content.apps.length ) return

    /* 应用 */
    appList.value = res.result.content.apps
    let arr = []
    appList.value.forEach(item => {
      if(item.selected == 1) {
        arr.push(item.appId)
      }
    })
    checkApp.value = arr

    /* 默认展开第一个树 */
    activeNameTree.value = checkApp.value[0]

    /* 权限树 */
    permissionTree.value = res.result.content.actionTree
    for(let i in permissionTree.value ){
      permissionTree.value[i].defaultCheckedKeys = []

      let checkKeys = []
      if(permissionTree.value[i].children && permissionTree.value[i].children.length) {
        checkKeys = findTreeArr(permissionTree.value[i].children, checkKeys)

        let newCheckKeys = []

        checkKeys.forEach(item => {
          resultChecked(item, permissionTree.value[i].children, newCheckKeys)
        })

        /* permissionTreeRef.value[i].setCheckedNodes(newCheckKeys) */
        
        permissionTree.value[i].defaultCheckedKeys = newCheckKeys
        
      }
    }
  }).catch(() => {
    treeLoading.value = false
    loading.value = false
  })
}

/* 保存权限按钮禁用 */
const rolePermissionLoading = ref(false)

/* 保存编辑角色权限 */
const savePermission = () => {
  ElMessageBox.confirm(
    '确定保存此变更吗？角色权限变更后，请重新登录以获取最新权限！',
    '请确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    if(!permissionTreeRef.value) return
    rolePermissionLoading.value = true

    let checkKeys = []

    permissionTreeRef.value.forEach((item) => {
      checkKeys = checkKeys.concat(item.getCheckedNodes(false,true))
    })

    let resultCheckKey = []
    checkKeys.forEach(item => {
      resultCheckKey.push(item.id)
    })

    let params = {
      roleId: currentRole.value.id,
      appIds: checkApp.value,
      actionIds: resultCheckKey.length ? resultCheckKey : []
    }

    http.$POST("RoleAction/UpdateRoleActions", params).then(res => {
      rolePermissionLoading.value = false
      if(res.isError) return ElMessage.warning(res.message)
      ElMessage.success("操作成功")

      getRolePermission()
    }).catch(() => {
      rolePermissionLoading.value = false
      ElMessage.warning("操作失败")
    })
  }).catch(() => {
    ElMessage.info("已取消保存")
  })
}

const isShowTooltip = ref(null)
const nodeLabelRef = ref(null)
const mouseOver = (event) => {
  var target = event.target;
  let textLength = target.clientWidth;
  let containerLength = target.scrollWidth;
  if (textLength < containerLength) {
    isShowTooltip.value = false
  } else {
    isShowTooltip.value = true
  }
}

/* 搜索用户关键词 */
const keyWord = ref("")

/* 用户列表分页 */
const dataTotal = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)

/* 切换页码方法 */
const currentChange = (val) => {
  currentPage.value = val
  getOrgUsers()
}

/* 用户表格数据加载动画 */
const loading = ref(false)

/* 用户表格数据 */
const userData = ref([])

/* 状态字段过滤 */
const statusFormatter = (row, column, cellValue) => {
  return cellValue == "1" ? "正常" : "停用"
}

/* 创建时间字段过滤 */
const getCreateTime = (cellValue) => {
  return format(cellValue)
}

/* 用户表格字段 */
const userTableColumns = ref([
  { field: "name", label: "姓名", minWidth: "120" },
  { field: "loginName", label: "账号", minWidth: "120" },
  /* { field: "Email", label: "邮箱", minWidth: "120" }, */
  { field: "createTime", label: "注册日期", minWidth: "120", formatter:(row, column, cellValue)=>{ return getCreateTime(cellValue)} },
  { field: "status", label: "状态", minWidth: "120", formatter: statusFormatter },
])

/* 点击检索用户 */
const getOrgUsers = () => {
  loading.value = true
  let params = {
    id: currentRole.value.id
  }
  if(keyWord.value) {
    params.name = keyWord.value
  }
  http.$GET("/RoleManager/GetRoleInfo", params).then(res => {
    loading.value = false
    if(res.isError) return ElMessage.warning("查询失败")
    userData.value = res.result.content.users
  }).catch(() => {
    loading.value = false
    ElMessage.warning("查询失败")
  })
}

/* 新增成员弹窗 */
const dialogMemberVisible = ref(false)
const ruleFormRef = ref(null)
const ruleForm = ref({
  userIds: []
})
const rules = reactive({
  userIds: [
    { required: true, message: '请选择用户', trigger: 'change' }
  ],
})
const userList = ref([])

/* 获取用户列表 */
const getUserList = () => {
  let params = {
    roleId: currentRole.value.id,
  }
  http.$GET("UserManager/GetUserListByNoRole", params).then(res => {
    if (res.isError) return ElMessage.warning(res.message)
    userList.value = userList.value.concat(res.result.content)
  }).catch(() => {
    ElMessage.warning("查询用户列表失败")
  })
}

/* 点击新增成员 */
const addMember = (type, row) => {
  dialogMemberVisible.value = true
  getUserList()
}

/* 新增按钮禁用 */
const memberButtonLoading = ref(false)

/* 新增成员提交 */
const submitMember = () => {
  ruleFormRef.value.validate((valid, fields) => {
    if(valid) {
      memberButtonLoading.value = true

      let userIds = JSON.parse(JSON.stringify(ruleForm.value.userIds))
      let params = {
        roleId: currentRole.value.id,
        userIds: userIds.length ? userIds.join(",") : ''
      }

      const formData = new FormData()
      for(let k in params) {
        formData.append(k ,params[k])
      }

      http.$POST("/RoleManager/AddUsersToRole", formData).then(res => {
        memberButtonLoading.value = false
        if(res.isError) return ElMessage.warning(res.message)
        ElMessage.success("操作成功")
        cancelMember()
        getOrgUsers()
      }).catch(() => {
        memberButtonLoading.value = false
        ElMessage.warning("操作失败")
      })
    }else{
      ElMessage.warning("请先完成必填项")
    }
  })
}

/* 取消新增成员 */
const cancelMember = () => {
  dialogMemberVisible.value = false
  ruleFormRef.value.resetFields()
  userList.value = []
}

/* 移除用户 */
const userDelete = (row) => {
  ElMessageBox.confirm(
    `确定将此用户从 ${currentRole.value.name} 角色中移除吗？`,
    '请确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    let params = {
      roleId: currentRole.value.id,
      userIds: row.id
    }
    const formData = new FormData()
    for(let k in params) {
      formData.append(k ,params[k])
    }

    http.$POST("/RoleManager/RemoveUsersToRole", formData).then(res => {
      if(res.isError) return ElMessage.warning(res.message)
      ElMessage.success("操作成功")
      getOrgUsers()
    })
  }).catch(() => {
    ElMessage.info("已取消移除")
  })
}

/* 查看用户详情 */
const userDetail = (row) => {
  let { href } = router.resolve({
    path: "/UserManager/UserDetail",
    query: { id: row.id }
  })
  window.open(href, "_blank")
}

</script>
<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";

/* 角色列表模块 */
.role-card {
  :deep(.el-card__header){
    padding: 14px 0 0 20px;
    border-bottom: none;
    background: #fff;

    .card-header{
      font-size: 16px;
      color: #8291A9;
    }
  }
  :deep(.el-card__body) {
    position: relative;
    padding: 0 16px 15px 16px;
  }
}
.role-list {
  width: calc(100% - 94px);
  height: 57px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow: hidden;
}

#custom-role-list {
  width: calc(100% - 144px);
}

/* 角色item */
.role-item {
  height: 57px;
  padding: 13px 16px 14px 15px;
  background: #FAFCFF;
  color: #505050;
  margin: 0 10px 10px 0;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 400;
  box-sizing: border-box;
  .role-top{
    display: flex;
    align-items: center;
  }
  .role-name{
    margin: 0 16px;
  }
}

/* 当前选中的角色 */
.role-active {
  padding: 9px 11px;
  background: #434E64;
  color: #fff;
  .role-count{
    padding-top: 4px;
    font-size: 22px;
  }
  .role-name{
    margin-top: 0;
  }
  .role-active-item{
    display: flex;
    align-items: center;
  }
  .role-img {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    background: #6C7993;
    img {
      width: 22px;
      height: 22px;
    }
  }
  .role-delete{
    width: 22px;
    height: 22px;
    border: 1px solid #fff;
    :deep(.el-icon) {
      font-size: 14px;
    }
  }
}

/* 右侧工具区 */
.role-toobar{
  display: inline-flex;
  align-items: end;
  position: absolute;
  right: 20px;
  bottom: 0;
}

.role-add{
  background: #FAFAFA;
  display: inline-flex;
  width: 33px;
  height: 57px;
  justify-content: center;
  align-items: center;
  margin-left: 12px;
}


.role-bottom{
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  height: calc(100% - 140px);
}

/* 角色权限部分 */
.role-permission{
  height: 100%;
  width: 360px;
  overflow: hidden;
  margin-right: 20px;
  position: relative;
  :deep(.el-card__header) {
    padding: 16px;
  }
  :deep(.el-card__body) {
    height: calc(100% - 66px);
  }
  :deep(.el-checkbox) {
    display: block;
    height: 24px;
    --el-checkbox-font-size: 16px;
  }

  .permission-content {
    padding-left: 10px;

    .permission-title {
      color: #333333;
      margin-bottom: 12px;
      font-size: 16px;
      font-weight: 600;
    }

    .collapse-title {
      flex: 1 0 90%;
      order: 1;
      text-align: left;
    }

    :deep(.el-collapse) {
      border: none;
      margin-left: 10px;
    }
    :deep(.el-collapse-item__wrap) {
      border: none;
    }
    :deep(.el-collapse-item__content) {
      padding-bottom: 0;
    }
    :deep(.el-collapse-item__header) {
      border: none;
      height: 26px;
      line-height: 26px;
      font-size: 16px;
    }
  }
  .tree{
    height: calc(100% - 40px);
    overflow: auto;
    margin-bottom: 20px;
  }
  .tree-buttom-button {
    position: sticky;
    text-align: right;
  }
}

/* 角色用户部分 */
.role-user{
  width: calc(100% - 380px);
  :deep(.el-button.is-round){
    padding: 8px;
  }
  :deep(.el-input__suffix .el-icon) {
    font-size: 20px;
    font-weight: bold;
    color: var(--theme-color);
  }
  .table-data{
    /* 表格高度 */
    :deep(.el-table){
      height: calc(100vh - 360px);
    }
  }
}

/* 用户详情部分 */
.user-detail {
  background: #FAFAFA;
  line-height: 34px;
  padding: 20px;
  margin: 10px;
}
</style>